<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>开通第三方账户</i></h3>
      <div class="pay-notice">
        <p>
          请开通汇付宝存管账户以便于您正常理财
        </p>
      </div>
      <div class="pay-form">
        <ul>
          <li>
            <label>真实姓名</label>
            <input
              v-model="userBind.name"
              type="text"
              class="pay-txt"
              maxlength="16"
              @input="changeInputName()"
              placeholder="您的真实姓名"
            />
            <div id="idCardErrorDiv">
              <p style="margin-top:10px;">
                <i v-show="state.nameA" style="color:#7fb80e" class="el-icon-check"></i>
                <i v-show="state.nameB" style="color:red" class=" el-icon-close"></i>
              </p>
            </div>
          </li>
          <li>
            <label>身份证号</label>
            <input
              v-model="userBind.idCard"
              type="text"
              class="pay-txt"
              maxlength="18"
              @input="changeInputIdCard()"
              placeholder="您的身份证号"
            />
            <div id="idCardErrorDiv">
              <p style="margin-top:10px;color:red">
                <i v-show="state.idCardA" style="color:#7fb80e" class="el-icon-check"></i>
                <i v-show="state.idCardB" style="color:red" class=" el-icon-close"></i>
                身份证信息认证后将不可修改，请您仔细填写
              </p>
            </div>
          </li>
          <li>
            <label>绑定银行</label>
            <input
              v-model="userBind.bankType"
              type="text"
              class="pay-txt"
              @input="changeInputBankType()"
              placeholder="银行名称"
            />
            <div id="idCardErrorDiv">
              <p style="margin-top:10px;">
                <i v-show="state.bankTypeA" style="color:#7fb80e" class="el-icon-check"></i>
                <i v-show="state.bankTypeB" style="color:red" class=" el-icon-close"></i>
              </p>
            </div>
          </li>
          <li>
            <label>银行卡号</label>
            <input
              v-model="userBind.bankNo"
              type="text"
              class="pay-txt"
              @input="changeInputBankNo()"
              placeholder="本人持有的银行卡"
            />
            <div id="idCardErrorDiv">
              <p style="margin-top:10px;">
                <i v-show="state.bankNoA" style="color:#7fb80e" class="el-icon-check"></i>
                <i v-show="state.bankNoB" style="color:red" class=" el-icon-close"></i>
              </p>
            </div>
          </li>
          <li>
            <label>预留手机</label>
            <input
              v-model="userBind.mobile"
              type="text"
              class="pay-txt"
              @input="changeInputMobile()"
              placeholder="银行卡预留手机号"
            />
            <div id="idCardErrorDiv">
              <p style="margin-top:10px;">
                <i v-show="state.mobileA" style="color:#7fb80e" class="el-icon-check"></i>
                <i v-show="state.mobileB" style="color:red" class=" el-icon-close"></i>
              </p>
            </div>
          </li>
          <li>
            <label>&nbsp;</label>
            <input v-model="agree" type="checkbox" />
            我已阅读并同意
            <a href="#" class="c-orange" target="_blank">
              《汇付宝托管账户协议》
            </a>
          </li>
          <li>
            <label>&nbsp;</label>
            <el-button :disabled="!agree" @click="commitBind()" type="primary">
              开户
            </el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      agree: false,
      userBind: {},
      state: {
        nameA:0,
        idCardA:0,
        bankTypeA:0,
        bankNoA:0,
        mobileA:0,

        nameB:0,
        idCardB:0,
        bankTypeB:0,
        bankNoB:0,
        mobileB:0,
      }
    };
  },

  methods: {
    changeInputName() {
      const reg = /^[\u4E00-\u9FA5]{1,6}$/;
      if (!reg.test(this.userBind.name)) {
        this.state.nameA=0;
        this.state.nameB=1;
        return false;
      }else{
        this.state.nameA=1;
        this.state.nameB=0;
        return true;
      }
    },
    changeInputIdCard() {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      console.log(reg.test(this.userBind.idCard));
      if (!reg.test(this.userBind.idCard)) {
        this.state.idCardA=0;
        this.state.idCardB=1;
        return false;
      }else{
        this.state.idCardA=1;
        this.state.idCardB=0;
        return true;
      }
    },
    changeInputBankType() {
      const reg = /^[\u4E00-\u9FA5]{1,6}$/;
      if (!reg.test(this.userBind.bankType)) {
        this.state.bankTypeA=0;
        this.state.bankTypeB=1;
        return false;
      }else{
        this.state.bankTypeA=1;
        this.state.bankTypeB=0;
        return true;
      }
    },
    changeInputBankNo() {
      const reg = /^([1-9]{1})(\d{14}|\d{18})$/;
      if (!reg.test(this.userBind.bankNo)) {
        this.state.bankNoA=0;
        this.state.bankNoB=1;
        return false;
      }else{
        this.state.bankNoA=1;
        this.state.bankNoB=0;
        return true;
      }
    },
    changeInputMobile() {
      const reg = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
      if (!reg.test(this.userBind.mobile)) {
        this.state.mobileA=0;
        this.state.mobileB=1;
        return false;
      }else{
        this.state.mobileA=1;
        this.state.mobileB=0;
        return true;
      }
    },
    commitBind() {
      var b = false;
      if(!this.changeInputName()){
        b = true;
      }
      if(!this.changeInputIdCard()){
        b = true;
      }
      if(!this.changeInputBankType()){
        b = true;
      }
      if(!this.changeInputBankNo()){
        b = true;
      }
      if(!this.changeInputMobile()){
        b = true;
      }
      if(b){
        this.$message.warning("请输入正确的信息");
        return
      }
      this.$alert(
        '<div style="size: 18px;color: red;">您即将前往汇付宝绑定账号</div>',
        '前往汇付宝资金托管平台',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '立即前往',
          callback: (action) => {
            //TODO 提交用户信息
            if (action === 'confirm') {
              this.$axios
                .$post('/api/core/userBind/auth/bind', this.userBind)
                .then((response) => {
                  console.log(response);
                  document.write(response.dataMap.formStr);
                });
            }
          },
        }
      );
    },
  },
};
</script>
